<template>
  <div>
    <div class="container" v-if="isEmpty">
      <ul class="user-list">
        <li v-for="(item,index) in users">
          <div class="avatar">
            <img :src="item.imageUrl">
          </div>
          <div class="name">{{item.name}}</div>
        </li>
      </ul>
    </div>
    <div v-else class="empty">
      没搜到哦~~
    </div>
  </div>
</template>

<script>
export default {
  name: "SearchUser",
  data(){
    return{
      isEmpty: false,
      users: [],
      input: this.$route.query.obj
    }
  },
  methods:{
    getList() {

      this.$axios.get("user/searchLike?obj="+ this.input)
          .then(resp => {
            let res = resp.data;
            let length = res.data.length
            if(length !== 0){
              this.isEmpty = true;
            }
            console.log("id")
            console.log(res.data)
            this.users = res.data;
          })
          .catch(error => {
            console.log(error)
          })
    }
  },
  created() {
    this.getList();
  }
}
</script>

<style scoped>
.container {
  max-width: 800px;
  margin: 0 auto;
  text-align: center;
}

h1 {
  font-size: 36px;
  margin-bottom: 20px;
}

.user-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}

.user-list li {
  margin: 10px;
  text-align: center;
}

.avatar {
  width: 80px;
  height: 80px;
  margin: 0 auto;
  border-radius: 50%;
  overflow: hidden;
}

.avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.name {
  margin-top: 5px;
  font-size: 16px;
}

</style>